<#assign ctx=request.contextPath />
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>流程实例状态图</title>
    <link rel="stylesheet" href="${ctx}/css.css">
    <script type="text/javascript" src="${ctx}/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="${ctx}/pinchzoom.js"></script>
    <script type="text/javascript">
        $(function () {
            $('div.pinch-zoom').each(function () {
                new RTP.PinchZoom($(this), {});
            });
        })
    </script>
</head>
<script language="javascript">
    function rollImg(o){
        /* 获取当前页面的缩放比
            若未设置zoom缩放比，则为默认100%，即1，原图大小
        */
        var zoom=parseInt(o.style.zoom)||100;
        /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom
            wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
        */
        zoom+=event.wheelDelta/12;
        /* 如果缩放比大于0，则将缩放比加载到页面元素 */
        if (zoom>0) {
            o.style.zoom=zoom+'%';
            pt.style.zoom = zoom + '%';
        }
        /* 如果缩放比不大于0，则返回false，不执行操作 */
        return false;
    }
</script>
<body>
<div class="top">
    <a href="${ctx}/hello" class="backtrack"><img src="${ctx}/0.png"></a>
    <a href="javascript:history.back();" class="return"><img src="${ctx}/12.png"></a>
    <div class="box">
        流程实例状态图
    </div>
</div>
<div class="empty"></div>                                                                                                                                                                                    <br/>
 <div class="pinch-zoom" style="position: relative; width: 700px;height: 900px;">
<!-- 1.获取到规则流程图 -->
<img style="position: absolute;top: 0px;left: 0px;" src="${ctx}/alter-meter.png" onmousewheel="return rollImg(this)">
<!-- 2.根据当前活动的坐标，动态绘制DIV -->
<span style="white-space:pre">		</span>
    <#list giList as gi>
        <div id="pt" style="position: absolute;border:1px solid red;top:${gi.y}px;left:${gi.x}px;width:${gi.width}px;height:${gi.height}px; ">
        <#--<input type="button" value="修改此节点">-->
</div>
    </#list>
</div>
</body>
</html>